<template>
    <div>
        <div id="container" style="width:600px;height:500px;"></div>
    </div>
</template>

<script>
export default{
        name:'qqmap',
        data() {
            return {}
        },
		props:['detail'],
        methods:{
            init:function(){
                
				var that = this;
				var marker;
								
				var myOptions = {
				  zoom: 12,                  
				  mapTypeId: qq.maps.MapTypeId.ROADMAP  
				}
				
				var map = new qq.maps.Map(document.getElementById("container"), myOptions);
				
				var myLatlng;
				console.log(that.detail);
				if(that.detail.latitude && that.detail.longitude){
						myLatlng = new qq.maps.LatLng(that.detail.latitude,that.detail.longitude);
						map.setCenter(myLatlng);
				}else{
					myLatlng = new qq.maps.LatLng(28.231281,112.916365);
					if(that.detail.address){
						var geocoder = new qq.maps.Geocoder();
						geocoder.setComplete(function(result) {
							myLatlng = result.detail.location;
							that.detail.latitude = myLatlng.getLat();
							that.detail.longitude = myLatlng.getLng();
							map.setCenter(result.detail.location);
							marker.moveTo(myLatlng);
							map.panTo(myLatlng);
						});
						var fullAddress = "";
						if(that.detail.address.indexOf('市') < 0)
						{
							fullAddress = that.cityName + that.detail.address;
						}else{
							fullAddress = that.detail.address;
						}
						geocoder.getLocation(fullAddress);
					}else{
						var citylocation = new qq.maps.CityService({
							complete : function(result){
								myLatlng = result.detail.latLng;
								that.detail.latitude = myLatlng.getLat();
								that.detail.longitude = myLatlng.getLng();
								map.setCenter(result.detail.latLng);
								marker.moveTo(myLatlng);
								map.panTo(myLatlng);
								that.cityName=result.detail.name;
							}
						});
						citylocation.searchLocalCity();
					}
				}
				
				marker = new qq.maps.Marker({
					position: myLatlng,
					map: map
				});
				map.setCenter(myLatlng);
				marker.moveTo(myLatlng);
				map.panTo(myLatlng);
				marker.setVisible(true);
				marker.setAnimation(qq.maps.MarkerAnimation.DOWN);
				marker.setDraggable(true);
				
				//给地图添加点击事件
				//并获取鼠标点击的经纬度
				qq.maps.event.addListener(map, 'click', function(event) {
					that.detail.latitude = event.latLng.getLat();
					that.detail.longitude = event.latLng.getLng();
					myLatlng = new qq.maps.LatLng(event.latLng.getLat(), event.latLng.getLng());
					marker.moveTo(myLatlng);
					map.panTo(myLatlng);
				});
                
            }
        },
        mounted() {
            this.init();
        }
    }
</script>